<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:ubb="http://java.sun.com/jsf/composite/components">

    <p:dataTable value="#{teamManager.teams}" var="team" emptyMessage="#{msg['managerPage.teamManagement.teams.emptyTable']}..." styleClass="teamsTable"
                 filteredValue="#{teamManager.filteredTeams}" rendered="#{managerView.activePanel == 'LIST_TEAMS'}"  rowIndexVar="teamIndex">
        <p:columnGroup type="header">
            <p:row>
                <p:column headerText="#{msg['managerPage.teamManagement.name']}" />
                <p:column headerText="#{msg['managerPage.teamManagement.leader']}" />
                <p:column headerText="#{msg['managerPage.teamManagement.creationDate']}" />
                <p:column colspan="2" headerText="#{msg['managerPage.teamManagement.sectionAssignment.assignedSections']}" />
            </p:row>
            <p:row>
                <p:column filterBy="#{team.teamName}" filterMatchMode="contains" />
                <p:column filterBy="#{teamManager.getTeamLeaderFullName(team)}" filterMatchMode="contains" />
                <p:column filterBy="#{team.creationDate}" filterMatchMode="contains" />
                <p:column filterBy="#{teamManager.getAssignedSectionsAsString(team.sections)}" filterMatchMode="contains" />
                <p:column style="background:transparent" />
            </p:row>
        </p:columnGroup>
        <p:column>
            <h:outputText value="#{team.teamName}" />
        </p:column>
        <p:column>
            <h:outputText value="#{teamManager.getTeamLeaderFullName(team)}" />
        </p:column>
        <p:column>
            <h:outputText value="#{team.creationDate}" />
        </p:column>
        <p:column styleClass="assignedSections">
            <h:outputText id="assignedSections" value="#{teamManager.getAssignedSectionsAsString(team.sections)}" />
            <p:tooltip for="assignedSections" showEffect="fade" hideEffect="fade" styleClass="assignedSectionsTooltip" rendered="#{team.sections != null and team.sections.size() &gt; 2}">
                <h:outputText value="#{msg['managerPage.teamManagement.sectionAssignment.assignedSections']}:" style="font-size: 14px;font-weight: bold" />
                <p:dataGrid columns="1" value="#{team.sections}" var="section">
                    <h:outputText value="- #{section.sectionName}" />
                </p:dataGrid>
            </p:tooltip>
        </p:column>
        <p:column styleClass="actions">
            <p:commandLink action="#{teamManager.edit(team)}" update="@form" >
                <h:graphicImage library="images" name="edit-16.png" />
                <h:outputText value="#{msg['Common.edit']}" />
            </p:commandLink>
            <p:commandLink onclick="confirmTeamDelete#{teamIndex}.show();return false;">
                <h:graphicImage library="images" name="trash-16.png" />
                <h:outputText value="#{msg['Common.delete']}" />
            </p:commandLink>
            <p:commandLink id="deleteTeam" action="#{teamManager.delete(team)}" update="@form" value="Execute" style="display: none" />
            <ubb:confirmationDialog title="#{msg['managerPage.teamManagement.teams.delete.confirmationTitle']}" message="#{msg['managerPage.teamManagement.teams.delete.confirmationMessage']}"
                                    actionButtonId="#{p:component('deleteTeam')}" widgetVar="confirmTeamDelete#{teamIndex}" />
        </p:column>
    </p:dataTable>
    <h:panelGroup rendered="#{managerView.activePanel == 'LIST_TEAMS'}" layout="block" styleClass="buttonPanel">
        <p:commandButton value="#{msg['managerPage.teamManagement.teams.createNew']}" action="#{teamManager.openPanel('NEW_TEAM')}" update="@form" icon="add" process="@this" />
        <p:commandButton value="#{msg['Common.cancel']}" action="#{managerView.switchPanel('DESCRIPTION')}" update="@form" icon="cancel" process="@this" />
    </h:panelGroup>
</ui:composition>